<template>
    <div class="container" id="app">
        <div class="panel">
            <div class="top panel-head">
                <div id="userName">
                    用户：{{ username }}
                    <span class="status" :class="{ online: isOnline, offline: !isOnline }">
                        {{ isOnline ? '在线' : '离线' }}
                    </span>
                </div>
                <div id="chatMes" v-if="chatMes" class="chat-message">
                    正在和 <span class="toName">{{ toName }}</span> 聊天
                </div>
            </div>
            <div class="panel-body">
                <div class="chat-area" v-show="isShowChat">
                    <div class="messages" ref="messagesContainer">
                        <div class="message" v-for="message in historyMessage" :key="message.id">
                            <div class="msg" :class="{ guest: !message.fromName, robot: message.fromName }">
<!--                            <div class="msg" :class="{ guest: message.toName !== sessionStorage.getItem('name'), robot: message.toName === sessionStorage.getItem('name') }">-->
                                <div class="msg-content">
<!--                                    <div class="msg-avatar" v-if="!message.toName" :style="{ backgroundImage: 'url(img/avatar/Member002.jpg)' }"></div>-->
                                    <div class="msg-text">{{ message.message }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
<!--                    输入框   -->
                    <div class="message-input">
                        <textarea v-model="sendMessage.message" @keyup.enter="submit" placeholder="在此输入文字信息..."></textarea>
                        <button @click="submit" class="submit-btn">发送</button>
                    </div>
                </div>
                <div class="sidebar">
                    <div class="tab" :class="{ active: activeTab === 'friends' }" @click="showTab('friends')">好友列表</div>
                    <div class="tab" :class="{ active: activeTab === 'broadcast' }" @click="showTab('broadcast')">系统广播</div>
                    <div class="tab-content" v-if="activeTab === 'friends'">
                        <ul>
                            <li v-for="friend in friendsList" :key="friend">
                                <a @click="showChat(friend)">{{ friend }}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content" v-if="activeTab === 'broadcast'">
                        <ul>
                            <li v-for="name in systemMessages" :key="name">
                                您的好友 {{ name }} 已上线
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import axios from 'axios';
import request9999 from '../../../utils/request9999.js';

const isShowChat = ref(false);
const chatMes = ref(false);
const isOnline = ref(true);
const username = ref('');
const toName = ref('');
const sendMessage = ref({ toName: '', message: '' });
const historyMessage = ref([]);
const friendsList = ref([]);
const systemMessages = ref([]);
const activeTab = ref('friends');

let ws;
axios.defaults.withCredentials = true;
// 初始化函数
const init = async () => {
    try {
        // 发送请求获取用户名
        const response = await request9999.get('/loginTable/getUsername', {
            params: { name: sessionStorage.getItem('name') } // 从 sessionStorage 中获取用户名
        });

        // 检查响应代码是否为 200
        if (response.data.code !== 200) {
            // 如果响应代码为 500，提示会话过期并重定向到登录页面
            if (response.data.code === 500) {
                alert('会话过期，请重新登录');
                window.location.href = '/login';
            }
            return;
        }

        // 将用户名存储在响应式变量中
        username.value = response.data.data;

        // 初始化 WebSocket 连接，使用 token 进行身份验证
        ws = new WebSocket('ws://localhost:8090/chat/' + sessionStorage.getItem('token'));

        // WebSocket 打开时设置用户在线状态为 true
        ws.onopen = () => isOnline.value = true;

        // WebSocket 关闭时设置用户在线状态为 false
        ws.onclose = () => isOnline.value = false;

        // WebSocket 收到消息时调用 onMessage 函数进行处理
        ws.onmessage = onMessage;
    } catch (error) {
        // 捕获并打印初始化 WebSocket 失败的错误信息
        console.error('初始化 WebSocket 失败:', error);
    }
};
// 显示聊天窗口
const showChat = (name) => {
    // 设置当前聊天对象的名字
    toName.value = name;

    // 从 sessionStorage 中获取与当前聊天对象的历史消息
    const history = sessionStorage.getItem(toName.value);

    // 如果存在历史消息，则将其解析为 JSON 格式并存储在 historyMessage 中，否则设置为空数组
    historyMessage.value = history ? JSON.parse(history) : [];

    // 设置聊天窗口显示状态为 true
    isShowChat.value = true;

    // 设置聊天信息显示状态为 true
    chatMes.value = true;
};

// 提交消息
const submit = () => {
    // 将发送消息对象的目标用户名设置为当前聊天对象
    sendMessage.value.toName = toName.value;

    // 将发送的消息添加到历史消息数组中
    historyMessage.value.push({ ...sendMessage.value });

    // 将更新后的历史消息保存到 sessionStorage 中
    sessionStorage.setItem(toName.value, JSON.stringify(historyMessage.value));

    // 使用 WebSocket 发送消息
    ws.send(JSON.stringify(sendMessage.value));

    // 清空发送消息的内容
    sendMessage.value.message = '';

    // 等待 DOM 更新完成后，将消息容器滚动到最底部
    nextTick(() => {
        const container = document.querySelector('.messages');
        container.scrollTop = container.scrollHeight;
    });
};

// 处理收到的消息
const onMessage = (evt) => {
    // 获取收到的数据
    const dataStr = evt.data;
    // 将数据解析成 JSON 格式
    const res = JSON.parse(dataStr);

    // 如果是系统消息
    if (res.system) {
        // 获取系统消息中的好友列表
        const names = res.message;
        // 清空好友列表和系统消息列表
        friendsList.value = [];
        systemMessages.value = [];
        // 遍历好友列表
        names.forEach(name => {
            // 排除当前用户名
            if (name !== username.value) {
                // 将好友添加到好友列表中
                friendsList.value.push(name);
                // 将好友上线信息添加到系统消息列表中
                systemMessages.value.push(name);
            }
        });
    } else {
        // 获取发送者的历史消息
        const history = sessionStorage.getItem(res.fromName);
        // 创建新的消息对象，将 toName 设置为 true
        const newMessage = { ...res, toName: true };
        // 更新历史消息，将新的消息添加到历史消息中
        historyMessage.value = history ? [...JSON.parse(history), newMessage] : [newMessage];
        // 将更新后的历史消息保存到 sessionStorage 中
        sessionStorage.setItem(res.fromName, JSON.stringify(historyMessage.value));
    }
};

// 显示不同的侧边栏标签内容
const showTab = (tab) => {
    activeTab.value = tab;
};

onMounted(() => {
    init();
});
</script>


<style scoped>
/* Container */
.container {
    position: relative;
    width: 800px; /* 固定宽度 */
    height: 600px; /* 固定高度 */
    margin: 0 auto;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* Panel */
.panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* Top panel head */
.panel-head {
    background-color: #007bff;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-head #userName {
    font-size: 16px;
}

.panel-head .status {
    font-size: 14px;
}

.panel-head .status.online {
    color: green;
}

.panel-head .status.offline {
    color: red;
}

.panel-head .chat-message {
    text-align: center;
    color: #6fbdf3;
    font-family: "SimSun", serif;
}

/* Panel body */
.panel-body {
    display: flex;
    height: calc(100% - 80px); /* 减去头部的高度 */
}

.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f5f5f5;
    border-right: 1px solid #ccc;
    position: relative;

}

.messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}
.message {
    display: flex;
    margin-bottom: 35px;
}
/* 对于自己发送的消息 */
.message .msg.guest {
    margin-left: auto; /* 将消息靠右对齐 */
    width: 30%;

}
/* 对于其他消息（如机器人或系统消息） */
.message .msg.robot {
    margin-right: auto; /* 将消息靠左对齐 */
    width: 70%;
}

/*.msg {*/
/*    display: flex;*/
/*    align-items: flex-start;*/
/*    max-width: 70%;*/
/*    height: ;*/，
/*}*/

/* 消息内容的样式 */
.msg-content {
    padding: 10px;
    border-radius: 10px;
    max-width: 60%; /* 消息内容的最大宽度 */
}

.msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-right: 10px;
}

.msg-text {
    padding: 10px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.msg.guest .msg-text {
    background-color: #e1ffc7;
    margin-left: auto;
}

.msg.robot .msg-text {
    background-color: #fff;
}

.message-input {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ccc;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    width: 566px;
    height: 30px;
}

.message-input textarea {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none;
    min-height: 15px;
}

.submit-btn {
    margin-left: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #20c4ca;
    color: white;
    cursor: pointer;
    height: 35px;
}

/* Sidebar */
.sidebar {
    width: 200px;
    background-color: #f5f5f5;
}

.tab {
    padding: 10px;
    cursor: pointer;
}

.tab.active {
    background-color: #007bff;
    color: white;
}

.tab-content {
    padding: 10px;
}

.tab-content ul {
    list-style: none;
    padding: 0;
}

.tab-content li {
    padding: 5px 0;
}
</style>
